<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Arc Edge</title>
    <style>
      .g6-tooltip{
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 12px;
        color: #545454;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }
    </style>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="../build/minimap.js"></script>
    <script src="./assets/d3-4.13.0.min.js"></script>
    <script src="./assets/jquery-3.2.1.min.js"></script>
    <script>
      const data = {
        nodes: [{
          id: 'node5',
          x: 100,
          y: 180,
          label: '5',
          size: 80
        },
        {
          id: 'node6',
          x: 400,
          y: 150,
          label: '6',
          size: 50
        },
        {
          id: 'node7',
          x: 600,
          y: 450,
          label: '7',
          size: 200
        }],
        edges: [{
          source: 'node6',
          target: 'node5',
          shape: 'arc',
          curveOffset: -150
        },
        {
          source: 'node6',
          target: 'node5',
          shape: 'arc',
          curveOffset: 50
        },
        {
          source: 'node5',
          target: 'node6',
          shape: 'arc',
          curveOffset: 50
        },
        {
          source: 'node5',
          target: 'node7',
          shape: 'arc',
          controlPoints: [{
            x: 200,
            y: 315
          }]
        }]
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        linkCenter: true,
        modes: {
          default: ['drag-canvas']
        },
        defaultEdge: {
          shape: 'arc',
          style: {
            lineWidth: 1,
            stroke: '#aaa'
          }
        }
      });
      graph.data(data);
      graph.render();</script>
  </body>
</html>